<template>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="17" y="15" width="2" height="10" rx="1" transform="rotate(90 17 15)" :fill="color" />
    <path
      d="M10.8289 2.04494C11.4943 1.446 12.5051 1.44608 13.1707 2.04494L22.5017 10.4424C22.8095 10.7195 22.8345 11.1941 22.5574 11.502C22.2803 11.8097 21.8056 11.8347 21.4978 11.5576L20.2498 10.4336V21C20.2497 21.9665 19.4662 22.75 18.4998 22.75H5.49976C4.53338 22.7499 3.74976 21.9664 3.74976 21V10.4336L2.50171 11.5576C2.19384 11.8346 1.7192 11.8098 1.44214 11.502C1.16522 11.1941 1.19015 10.7195 1.4978 10.4424L10.8289 2.04494ZM12.1667 3.15919C12.0718 3.07412 11.9277 3.07404 11.8328 3.15919L5.24976 9.084V21C5.24976 21.138 5.3618 21.2499 5.49976 21.25H18.4998C18.6378 21.25 18.7497 21.1381 18.7498 21V9.084L12.1667 3.15919Z"
      :fill="color" />
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
    fill?: string;
    strokeWidth?: number | string;
    iconClass?: string;
  }

  withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#7A7A7A',
    fill: 'none',
    strokeWidth: 1,
    iconClass: '',
  });
</script>
